<template>
  <div
    class="app_editor"
    :id="id"
    ref="app-editor"
  ></div>
</template>

<script>
export default {
  name: 'AppEditor',
  props: {
    id: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '320'
    }
  },
  data() {
    return {
      ue: null
    }
  },
  computed: {
    contentVal: {
      get() {
        return this.content
      },
      set(val) {
        this.$emit('update:content', val)
      }
    }
  },
  mounted() {
    // 初始化编辑器
    this.initEditor()
  },
  methods: {
    initEditor() {
      const that = this
      // eslint-disable-next-line no-undef
      this.ue = UE.getEditor(that.id, {
        initialFrameWidth: '100%',
        initialFrameHeight: that.height,
        scaleEnabled: true
      })

      // 编辑器准备就绪后会触发该事件
      this.ue.addListener('ready', () => {
        // 设置可以编辑
        this.ue.setEnabled()
        if (this.contentVal) {
          this.ue.setContent(this.contentVal)
        }
      })
      // 编辑器内容修改时
      this.selectionchange()
    },
    // 编辑器内容修改时
    selectionchange() {
      this.ue.addListener('selectionchange', () => {
        this.contentVal = this.ue.getContent()
      })
    }
  },
  deactivated() {
    // 销毁编辑器实例，使用textarea代替
    this.ue.destory()
    // 重置编辑器，可用来做多个tab使用同一个编辑器实例
    // 如果要使用同一个实例,请注释destroy()方法
    this.ue.reset()
  }
}
</script>

<style lang="scss" scoped>
.app_editor{
  line-height: normal;
}
</style>
